<template>
	<view class="pay-list">
		<view class="pay-item flex flex-ai-center  ptb-12" v-for="item in payList" :key="item.key" @click="change(item)">
			<w-icon :name="item.icon" size="24"></w-icon>
			<text class="ml-12 font-color-gray2 font-size-14 flex-1">{{item.name}}</text>
			<w-icon v-if="item.value==value" name="checked" size="20"></w-icon>
			<w-icon v-else name="uncheck" size="20"></w-icon>
		</view>
	</view>
</template>

<script>
	export default {
		name:"w-pay-type",
		props:{
			value:{
				type:Number,
				default:null
			},
			disable:{
				type:[Number,String],
				default:null
			}
		},
		model:{
			prop:'value',
			event:"change"
		},
		data() {
			return {
				payList:[
					{
						name:'钱包A',
						key:"wechat_pay_status",
						icon:"hf",
						value:1,
					},
					{
						name:'易宝支付',
						key:"zhifubao_pay_status",
						icon:'yb',
						value:2,
					}
				],
				ableMap:{}
			};
		},
		computed:{
			ableList(){
				return this.payList.filter(v=>{
					return this.ableMap[v.key]==1&&v.key!=this.disable
				})
			}
		},
		mounted() {
			// this.getPayType()
		},
		methods:{
			getPayType(){
				getConfig(this.payList.map(v=>v.key).join(',')).then(res=>{
					this.ableMap=res.data;
				})
			},
			change({value}){
				this.$emit('change',value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay-list{
		.pay-item:last-child{
			border: none;
		}
		.pay-item{
			width: 100%;
			height: 48px;
			border-bottom:1px solid  rgba(0,0,0,0.1);;
			.icon{
				width: 64rpx;
				height: 64rpx;
			}
			.check-icon{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>